<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RBAC权限管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .login-container {
            max-width: 400px;
            margin: 100px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .dashboard {
            padding: 20px;
        }
        .nav-tabs {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 登录页面 -->
        <div id="login-page" v-if="!isLoggedIn">
            <div class="login-container">
                <h2 class="text-center mb-4">RBAC系统登录</h2>
                <form @submit.prevent="login">
                    <div class="mb-3">
                        <label class="form-label">用户名</label>
                        <input type="text" class="form-control" v-model="loginForm.username" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">密码</label>
                        <input type="password" class="form-control" v-model="loginForm.password" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">登录</button>
                </form>
            </div>
        </div>

        <!-- 主界面 -->
        <div id="main-page" v-if="isLoggedIn">
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <div class="container">
                    <a class="navbar-brand" href="#">RBAC管理系统</a>
                    <div class="navbar-nav ms-auto">
                        <span class="navbar-text me-3">欢迎，{{ userInfo.username }}</span>
                        <button class="btn btn-outline-light btn-sm" @click="logout">退出</button>
                    </div>
                </div>
            </nav>

            <div class="container dashboard">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#" @click="activeTab = 'dashboard'">仪表盘</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" @click="activeTab = 'users'">用户管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" @click="activeTab = 'roles'">角色管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" @click="activeTab = 'permissions'">权限管理</a>
                    </li>
                </ul>

                <!-- 仪表盘 -->
                <div v-if="activeTab === 'dashboard'">
                    <h3>系统概览</h3>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card text-white bg-primary">
                                <div class="card-body">
                                    <h5 class="card-title">{{ stats.userCount }}</h5>
                                    <p class="card-text">用户总数</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-white bg-success">
                                <div class="card-body">
                                    <h5 class="card-title">{{ stats.roleCount }}</h5>
                                    <p class="card-text">角色总数</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-white bg-warning">
                                <div class="card-body">
                                    <h5 class="card-title">{{ stats.permissionCount }}</h5>
                                    <p class="card-text">权限总数</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 用户管理 -->
                <div v-if="activeTab === 'users'">
                    <h3>用户管理</h3>
                    <div class="mb-3">
                        <button class="btn btn-primary" @click="showAddUser = true">新增用户</button>
                    </div>
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>邮箱</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="user in users" :key="user.id">
                                <td>{{ user.id }}</td>
                                <td>{{ user.username }}</td>
                                <td>{{ user.email }}</td>
                                <td>{{ user.status === 1 ? '正常' : '禁用' }}</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary me-1">编辑</button>
                                    <button class="btn btn-sm btn-outline-danger">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 其他管理页面类似 -->
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.5.0/dist/axios.min.js"></script>
    <script src="app.js"></script>
</body>
</html>